<script setup lang="ts" name="B8Computed">
import { computed, ref } from "vue";

const firstName = ref("张");
const lastName = ref("三");

//const fullName = computed(() => `${firstName.value}-${lastName.value}`);

const fullName = computed({
  get: () => `${firstName.value}-${lastName.value}`,
  set: (v) => {
    [firstName.value, lastName.value] = v.split("-");
  },
});

const changeFullName = () => {
  fullName.value = "李-四";
};
</script>

<template>
  <div>
    <label>姓：<input class="border px-1 py-0.5" type="text" v-model="firstName" /></label>
  </div>
  <div class="my-3">
    <label>名：<input class="border px-1 py-0.5" type="text" v-model="lastName" /></label>
  </div>
  <div>全名：<input class="border px-1 py-0.5" v-model="fullName" /></div>
  <div>
    <button class="border px-1 py-0.5" @click="changeFullName">
      把全名修改为「李-四」
    </button>
  </div>
</template>
